<template>
    <el-upload
      v-model:file-list="fileList"
      action="/api/mock/product/upload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
  
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  
  import { UploadProps, UploadUserFile } from 'element-plus'
  
  const emit = defineEmits(['sendImgUrl'])
  const fileList = ref([
    // {
    //   name: 'food.jpeg',
    //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    // }
  ])
  
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  
  const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
  }
  
  const handlePictureCardPreview  = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
  }

  const handleSuccess = (response, uploadFile, uploadFiles) => {
    console.log("response:", response,)
    console.log("uploadFile:", uploadFile)
    console.log("uploadFiles:", uploadFiles)
    console.log("fileList:", fileList.value)
    let imgUrl = response.filename
    emit('sendImgUrl', imgUrl) 
  }
  </script>
  